//datasource
var tutors = [
    { firstName: '昭轩', gender: 'M', field: ["Engineer", "ACT"], intro: '我强得可怕', openning: { MON: ['8:00 - 10:00', '13:00 - 15:00'], FRI: ['10:00 - 12:00', '15:00 - 17:00'] }, rate: 100 },
    { firstName: '钟迪', gender: 'M', field: ["Stats", "ACT"], intro: '我可怕得强', openning: { MON: ['8:00 - 10:00', '13:00 - 15:00'], WEN: ['10:00 - 12:00', '15:00 - 17:00'] }, rate: 100 },
    { firstName: '东杨', gender: 'F', field: ["Math", "Art"], intro: '我最可怕', openning: { MON: ['8:00 - 10:00', '13:00 - 15:00'] }, rate: 200 }
]


//实现下拉菜单的数据绑定的算法描述:

//获取data size
//遍历tutor数组，对每个tutor的field属性值进行统计
//-- 遍历每个tutor的field 属性数组
//-- 将不重复的值累加
//捕获下拉菜单元素
//根据数据的大小，来动态绘制菜单项
//-- 根据data size循环创建option标签元素节点
//-- 为新建的option节点添加text跟value
//-- 将option 节点追加到父级元素select上


//声明变量们
var sumOfField = [] //声明空数组
var selectEle = document.querySelector("#field") //捕获select元素
var results = []
var resultsArea = undefined
var stage = undefined
var title = undefined
var submitBtn = document.querySelector("#submit")


//定义统计总技能的函数
function getFieldList() {
    //for循环遍历tutors数组
    for (let i = 0; i < tutors.length; i++) {
        var currentFields = tutors[i].field //当前遍历到的元素
        for (let k = 0; k < currentFields.length; k++) {//内层循环遍历每个tutor的field属性
            if (sumOfField.indexOf(currentFields[k]) < 0) {//如果当前的属性没有在sumOfField容器中出现过
                sumOfField.push(currentFields[k])//放进去
            }
        }
    }
}

//定义生成下拉菜单的函数
function generateSelectMenu() {
    for (let i = 0; i < sumOfField.length; i++) {
        var newItem = document.createElement('option')//创建游离的option元素
        newItem.innerText = sumOfField[i]//给option添加文字内容
        newItem.value = sumOfField[i]//给option添加value属性值
        selectEle.appendChild(newItem)//将option追加到select父级元素上
    }

}
//定义查找tutor的函数
//查询的实现
//通过用户点击提交按钮触发查询操作
//将用户提交的值当成过滤条件，遍历tutor数组，找出符合条件的tutor

function getMatchedTutors(gender, field) {
    //遍历tutors数组
    for (let i = 0; i < tutors.length; i++) {
        //根据用户的选择筛选出符合的tutor的名字
        if (tutors[i].gender == gender && tutors[i].field.indexOf(field) != -1) {
            results.push(tutors[i])//把tutor对象放入结果数组中
        }
    }
}

//定义首页查询按钮点击事件触发的函数
function getList(event) {
    event.preventDefault()//阻止按钮默认的刷新行为

    var gender = document.querySelector("#gender").value//获取下拉菜单中选中的值
    var field = document.querySelector("#field").value

    getMatchedTutors(gender, field)
    renderTutorPage()
    resultsArea.appendChild(createUnorderList())
    stage.appendChild(resultsArea)
    submitBtn.value = 'Back'
    submitBtn.addEventListener('click', function () {
        location.reload()
    })
    stage.appendChild(submitBtn)
}

//定义生成查询tutor结果显示页面的框架
//--清空局部元素
//--创建承载结果内容的新元素
function renderTutorPage() {
    stage = document.querySelector('.stage')//捕获蓝色区域
    title = document.querySelector('.title')
    stage.removeChild(document.querySelector('form'))//通过removeChild移除form标单节点
    title.innerText = 'Your match'

    resultsArea = document.createElement('div')//创建新的div用来展示结果
    resultsArea.classList.add('rArea')//添加class属性值

}

//定义生成schedule页面的函数
function renderSchedulePage(currentTutor) {
    var uList = document.querySelector('ul')
    uList.innerHTML = ''//移除当前的查询结果列表
    resultsArea.innerText = currentTutor.firstName + '\'s schedule:'//绘制schedule页面
    var radio = '<input type = "checkbox">'
    for (let x in currentTutor.openning) {
        var listItem = document.createElement('li')//创建<li>列表元素
        listItem.innerHTML = `${x}: `
        var details = currentTutor.openning[x]
        for (let i in details) {
            listItem.innerHTML = listItem.innerHTML + details[i] + " " + radio
            console.log(listItem.innerHTML)
        }
        uList.appendChild(listItem)
        resultsArea.appendChild(uList)
        uList.style.fontFamily = "consolas"
        submitBtn.value = 'Make an appointment'
    }
}

//定义在结果页面内创建无序列表的函数
function createUnorderList() {
    var uList = document.createElement('ul')//创建无序列表元素
    //通过循环创建无序列表中的列表项
    for (let i = 0; i < results.length; i++) {
        var currentTutor = results[i]//将当前的tutor暂存
        var listItem = document.createElement('li')//创建<li>列表元素
        //将<li>的内部html设置为 -- name + rate + 回车 + intro + 按钮 --
        listItem.innerHTML = `${currentTutor.firstName} hourly rate: <span id='rate'> ${currentTutor.rate}</span> rmb<br/>intro: <span id='intro'>${currentTutor.intro}</span>`
        var btn = document.createElement('button')
        btn.innerText = "schedule"
        btn.addEventListener('click', function(){renderSchedulePage(currentTutor)}) //给按钮添加点击事件监听
        listItem.appendChild(btn)
        uList.appendChild(listItem)//追加到父级节点
    }
    return uList
}


getFieldList()
generateSelectMenu()
submitBtn.addEventListener('click', getList)//添加点击事件监听



